<template>
    <div class="container">
      <div id="map"></div> 
      <el-button class="set-btn attr" @click="setAttribute" type="primary">设置属性</el-button>
      <el-button class="set-btn index" @click="setLayerIndex('layer-geojson-symbol')" type="primary">设置index</el-button>
    </div>
  </template>
  
  <script>
  import "mapbox-gl/dist/mapbox-gl.css";
  import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
  import chinaJSON from '@/assets/datas/中华人民共和国'
  export default {
    name: "Vue2MapboxMapTemplate",
    data() {
      return {
        flag: true
      };
    },
  
    mounted() {
      this.initMap();
    },
  
    methods: {
      initMap() {
        mapboxgl.accessToken =
          "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
        this.map = new mapboxgl.Map({
          container: "map", // container ID
          style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z", // style URL
          center: [118.79013542048335, 32.05775855185749], // starting position [lng, lat]
          // center: mapboxgl.MercatorCoordinate.fromLngLat([118.79013542048335,32.05775855185749]), // starting position [lng, lat]
          zoom: 5, // starting zoom
          projection: "mercator",
        });
  
        //
        this.map.on("click", (evt) => {
          console.log(evt.lngLat);
          let features = this.map.queryRenderedFeatures(evt.point);
          console.log(features[0]);
        });

        this.map.on('load', (e)=>{
          this.map.addSource('source-geojson',{
                type: 'geojson',
                data: chinaJSON
            })

            this.map.addLayer({
                id: 'layer-geojson-symbol',
                type: 'symbol',
                source: 'source-geojson',
                layout:{
                    'text-field': '{name}',
                    'symbol-placement': 'point',
                    // 'symbol-placement': 'line'
                },
                paint: {
                    'text-color': '#ff00ff',
                }
            })
            // // 
            this.map.addLayer({
                id: 'layer-geojson-fill',
                type: 'fill',
                source: 'source-geojson',
                paint: {
                    // 'fill-color': '#666666',
                    'fill-color': [
                      'interpolate',
                      ['cubic-bezier', 0.42, 0, 0.58, 1],
                      // ['linear'],
                      ['get', 'adcode'],  
                      110000, 'rgba(33,102,172,1)',
                      120000, 'rgba(0,0,55,1)',
                    ]
                }
            })
            // 
            this.map.addLayer({
                id: 'layer-geojson-line',
                type: 'line',
                source: 'source-geojson',
                paint: {
                    'line-width': 5,
                    'line-color': '#ffffff',
                }
            });

      
        })
      },
      setAttribute(){
        // this.map.setLayoutProperty('points', 'icon-allow-overlap', true)
        this.flag = !this.flag;
        this.map.setLayoutProperty('layer-geojson-fill', 'visibility', this.flag?'visible':'none');
      },
      setLayerIndex(afterLayerId, beforeLayerId){
        this.map.moveLayer(afterLayerId, beforeLayerId);
      }
    },
  };
  </script>
  
<style>
.set-btn{
  position: absolute;
  top: 20px;
}
.attr{
  left: 50px;
}
.index{
  left: 150px;
}
</style>
  